<template>
    <div>
        <el-form style="width: 700px" :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="电影院名称" prop="cinema_name">
                <el-input v-model="form.cinema_name" />
            </el-form-item>

            <el-form-item label="选择位置">
                <div id="container" style="width:100%;height:200px;border:1px solid black;">
                </div>
            </el-form-item>

            <el-form-item label="详细地址" prop="address">
                <el-input v-model="form.address" />
            </el-form-item>
            <el-form-item label="省份" prop="province">
                <el-input v-model="form.province" />
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="form.city" />
            </el-form-item>
            <el-form-item label="地区" prop="district">
                <el-input v-model="form.district" />
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude" />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude" />
            </el-form-item>
            <el-form-item label="电影院标签" prop="tags">
                <el-select v-model="form.tags" multiple>
                    <el-option v-for="item in formTags" :label="item.tagname" :value="item.tagname" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">确定修改</el-button>
                <el-button type="primary" @click="$router.go(-1)">返回</el-button>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
    data() {
        return {
            map: null,
            marker: null,
            form: {
                id: this.$route.params.id,
                cinema_name: '',
                address: '',
                province: '',
                city: '',
                district: '',
                longitude: '',
                latitude: '',
                tags: '',
            },
            formTags: [],
            rules: {
                cinema_name: [{ required: true, message: '必填', trigger: 'blur' }],
                address: [{ required: true, message: '必填', trigger: 'blur' }],
                province: [{ required: true, message: '必填', trigger: 'blur' }],
                city: [{ required: true, message: '必填', trigger: 'blur' }],
                district: [{ required: true, message: '必填', trigger: 'blur' }],
                longitude: [{ required: true, message: '必填', trigger: 'blur' }],
                latitude: [{ required: true, message: '必填', trigger: 'blur' }],
                tags: [{ required: true, message: '必填', trigger: 'blur' }],
            },
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.tags = this.form.tags.join(',')
                    this.$http.cinemaApi.update(this.form).then(res => {
                        if (res.data.code == 200) {
                            this.resetForm('form')
                            this.$message({
                                message: '修改影院信息成功',
                                type: 'success'
                            })
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getAddress(AMap, postion) {
            let geocoder = new AMap.Geocoder();
            geocoder.getAddress(postion, (status, result) => {
                console.log(result.regeocode);
                this.form.address = result.regeocode.formattedAddress
                this.form.province = result.regeocode.addressComponent.province
                this.form.city = result.regeocode.addressComponent.city
                this.form.district = result.regeocode.addressComponent.district
                this.form.longitude = postion[0];
                this.form.latitude = postion[1];
            })
        },
        loadMap() {
            AMapLoader.load({
                "key": "aac7008d35e933c02d226a990f5bd236",   // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ['AMap.Geocoder'],      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map('container', {
                    center: [114.379845, 30.50663],//初始化地图中心点位置
                    zoom: 12,//初始化地图级别
                });
                this.map.on('click', ev => {
                    let { lng, lat } = ev.lnglat;
                    if (this.marker) {
                        this.marker.setPosition([lng, lat])
                    } else {
                        this.marker = new AMap.Marker({
                            position: [lng, lat], // 基点位置
                        });
                        this.map.add(this.marker)
                    }
                    // 通过该经纬度，获取对应的详细位置字符串描述
                    // 需要访问高德地图的web服务
                    this.getAddress(AMap, [lng, lat])
                });
            }).catch(e => {
                console.log(e);
            });
        }
    },
    mounted() {
        this.$http.cinemaApi.queryAllTags().then(res => {
            this.formTags = res.data.data
        });
        // this.loadMap()

    },
}
</script>

<style lang="scss" scoped>

</style>